<script setup lang="ts">
import { ref, onMounted } from 'vue'
import { BorderBox1 as DvBorderBox1 } from '@kjgl77/datav-vue3'
import RightPanel from '@/components/IndexComponents/RightPanel.vue'
import MiddlePanel from '@/components/IndexComponents/MiddlePanel.vue'
import LeftPanel from '@/components/IndexComponents/LeftPanel.vue'
import TopPanel from '@/components/IndexComponents/TopPanel.vue'
import { useSensorStore } from '@/stores/sensor'
import { useRouter } from 'vue-router'

const router = useRouter()
const borderRef = ref<InstanceType<typeof DvBorderBox1>>()
const sensorStore = useSensorStore()

onMounted(async () => {
  try {
    const token = localStorage.getItem('token')
    if (!token) {
      localStorage.removeItem('isLogin')
      router.push('/login')
      return
    }
  } catch (error) {
    console.error('初始化错误:', error)
  }
})
</script>

<template>
  <div class="index-container flex flex-col">
    <TopPanel />
    <div class="main-content">
      <DvBorderBox1 ref="borderRef" class="content-border">
        <div class="panels-container">
          <LeftPanel />
          <MiddlePanel />
          <RightPanel />
        </div>
      </DvBorderBox1>
    </div>
  </div>
</template>

<style scoped>
.index-container {
  width: 2560px;
  height: 1440px;
  display: flex;
  flex-direction: column;
  background: #001529;
  overflow: hidden;
}

.main-content {
  position: relative;
  padding: 10px;
  margin: 0;
  height: calc(100% - 140px);
}

.content-border {
  width: 100%;
  height: 100%;
  background: rgba(0, 21, 41, 0.6);
}

.panels-container {
  display: flex;
  width: 100%;
  height: 100%;
  gap: 10px;
  padding: 10px;
  justify-content: space-between;
}
</style>

